<template>
  <quill-editor
    v-model="editorCont"
    ref="myQuillEditor"
    :options="editorOption"
  >
  </quill-editor>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";

import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'

// import resizeImage from 'quill-image-resize-module'
Quill.register('modules/ImageExtend', ImageExtend)

export default {
  props: ["content"],
  data() {
    return {
      editorCont: this.content,
      editorOption: {
        // some quill options
        modules: {
          ImageExtend: {
              loading: true,
              name: 'f1',
              action: process.env.VUE_APP_BASE_API + "/api/v1/upPic",
              response: (res) => {
                return process.env.VUE_APP_BASE_API + "/" + res.raw
              }
            },
          toolbar: {
              container: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote"],
            [{ header: 1 }, { header: 2 }],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }],
            [{ indent: "-1" }, { indent: "+1" }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ font: [] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ["clean"],
            ["link", "image", "video"],
          ],
          handlers: {
              'image': function() {
                  QuillWatch.emit(this.quill.id)
              }
          }
          }
        },
      },
    };
  },

  watch: {
    content: function (newVal, oldVal) {
      this.editorCont = newVal;
    },
    editorCont: function (newVal, oldVal) {
      this.$emit("update:content", newVal);
    },
  },
};
</script>

<style>
.ql-picker-label::before {
  position: relative;
  top: -9px;
}

.ql-icon-picker,
.ql-color-picker {
  top: -6px;
}
.quill-editor {
  margin-right: 15px;
}
.ql-container {
  font-size: 16px;
}
.ql-editor {
  height: calc(100vh - 330px);
}
</style>